<!-- 物料清单 -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-input v-model="queryParams.inventoryCode" class="zs-select-md zs-space-right-sm" placeholder="清单编号" clearable @blur="queryList" />
				<el-input v-model="queryParams.inventoryName" class="zs-select-md zs-space-right-sm" placeholder="清单名称" clearable @blur="queryList" />
				<el-cascader class="zs-select-md zs-space-right-sm" @change="cascaderChange" v-model="queryParams.inventoryClass" :options="cascaderData" :props="cascaderProps" clearable placeholder="清单分类" filterable />
				<el-button class="zs-btn-plain" @click="queryList" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_query'] }"> 查询 </el-button>
			</span>
			<span>
				<el-button class="zs-btn-md zs-btn-primary" @click="openDrawer(false, 'add', {}, 'base')" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_add'], businessFlag: true }">新增</el-button>
			</span>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="(index) => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="inventoryCode" label="清单编号" minWidth="120" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="inventoryName" label="清单名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="num" label="可用量" show-overflow-tooltip align="right" :formatter="defaultTableData" />
				<el-table-column label="预警" show-overflow-tooltip align="center">
					<template #default="{ row }">
						{{ row.warnStatus == 1 ? '已开启' : '未开启' }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作" width="120" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'add', row, 'storagein')" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_into'], businessFlag: true }">入库</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goStorageOutPage(row)" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_out'], businessFlag: true }">出库</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="" label="查看" width="200" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="goStoragePage(row)" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_inventory'], businessFlag: true }">库存明细</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goStorageInOutPage(row)" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_detail'], businessFlag: true }">出入库明细</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="" label="预警规则" width="120" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="openDrawer(true, 'info', row, 'warning')" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_view'] }">查看</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'edit', row, 'warning')" v-btnPermi="{ permis: ['p_btn_property_project_materiel_list_config'], businessFlag: true }">配置</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="level1Value" label="一级分类" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="level2Value" label="二级分类" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="level3Value" label="三级分类" show-overflow-tooltip align="center" :formatter="defaultTableData" />
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>

	<!-- 物料抽屉 -->
	<DrawerBase :isShow="drawer.base.isShowDrawer" :isReadOnly="drawer.base.isReadOnly" :handleType="drawer.base.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'base')"> </DrawerBase>

	<!-- 入库 -->
	<DrawerStorageIn :isShow="drawer.storagein.isShowDrawer" :isReadOnly="drawer.storagein.isReadOnly" :handleType="drawer.storagein.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'storagein')"> </DrawerStorageIn>

	<!-- 预警 -->
	<DrawerWarning :isShow="drawer.warning.isShowDrawer" :isReadOnly="drawer.warning.isReadOnly" :handleType="drawer.warning.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'warning')"> </DrawerWarning>
</template>

<script setup>
	import DrawerBase from './components/drawerBase.vue';
	import DrawerStorageIn from './components/drawerStorageIn.vue';
	import DrawerWarning from './components/drawerWarning.vue';
	import { getAllClassificationDataApi, getInventoryApi } from '@/api/common.js';
	import { suppliesListApi } from '@/api/supplies.js';
	import { ref, reactive, VueElement } from 'vue';
	import { useStore } from 'vuex';
	import { useRouter, useRoute } from 'vue-router';
	import { defaultTableData } from '@/utils/publicUtils';

	const router = useRouter();
	const route = useRoute();
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let queryParams = reactive({ projectCode: route.query.projectCode, pageNumber: 1, pageSize: curPageSize.value });

	// 级联规则
	const cascaderProps = reactive({
		checkStrictly: true,
		value: 'code',
		label: 'dictLabel',
	});
	// 级联数据
	let cascaderData = ref([]);
	// 级联变更
	const cascaderChange = val => {
		let cur = ['level1', 'level2', 'level3'];
		if (val) {
			cur.forEach((el, index) => {
				queryParams[el] = val[index] || '';
			});
		} else {
			cur.forEach(ele => {
				queryParams[ele] = '';
			});
		}
		queryList();
	};

	// 抽屉相关
	let currentRow = reactive({ data: {} });
	let drawer = reactive({
		base: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
		warning: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
		storagein: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});

	const openDrawer = (flag, handleType, row, drawerType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
		currentRow.data = row;
	};

	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && queryList('init');
	};

	// 列表数据源
	const queryList = async init => {
		if (process.env.NODE_ENV !== 'development') {
			let portalResourceList = JSON.parse(localStorage.getItem('portalResourceList'));
			if (init != 'init' && !portalResourceList.includes('p_btn_property_project_materiel_list_query')) return;
		}
		tableData.loading = true;
		let res = await suppliesListApi(queryParams);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList('init');
	};

	// 获取全部分类数据
	const queryAllClassificationData = async () => {
		let res = await getAllClassificationDataApi();
		cascaderData.value = res.data.data || [];
	};

	//出库
	const goStorageOutPage = row => {
		router.push({ path: '/page/routeController/index', query: { rid: 'page_property_project_materiel_into_list', rTitle: '出库列表', id: row.id } });
	};

	//库存明细
	const goStoragePage = row => {
		router.push({ path: '/page/routeController/index', query: { rid: 'page_property_project_materiel_inventory_list', rTitle: '库存明细', id: row.id } });
	};

	//出入库明细
	const goStorageInOutPage = row => {
		router.push({ path: '/page/routeController/index', query: { rid: 'storageInOutInfo', rTitle: '出入库明细', id: row.id, projectCode: route.query.projectCode } });
	};

	queryList('init');
	queryAllClassificationData();
</script>
